* {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-user-select: none;
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "STHeitiSC-Light", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
i {
    font-style:normal;
    color: #FF5442 ;
}
body, html {
    width: 100%;
    height: 100%;
}

:global #main {
    width: 100%;
    height: 100%;
}

.all {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.box {
    width: 750rpx;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background: #FED44D;
    box-shadow: inset 0 14px 14px 0 #FFE176;
    color: #A65300;

}
.banner {
    width: 750rpx;
    height: 510rpx;
    background: url('../image/banner.png') no-repeat center;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner span {
    color: #fff;
    font-size: 32rpx;
    line-height: 32rpx;
    padding-top: 30rpx;
}
.activeState {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.activeState .stateTitle {
    width: 310rpx;
    height: 66rpx;
    background: url('../image/activeState.png');
    background-size: 100%;
}
.activeState .stateText {
    width: 100%;
    margin-top: 40rpx;
    background: #FFF4D2;
    border-radius: 15px;  
    font-size: 28rpx;
    padding-left: 30px;
    padding-right: 18px;
    box-sizing: border-box;
}
.activeState .stateText div {
    padding: 20rpx 0;
    line-height: 52rpx;
    position: relative;
}
.activeState .stateText div::before {
    content: '';
    position: absolute;
    top:40rpx;
    left: -30rpx;
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background-color:  #A65300;
}
.activeState .stateTitle2 {
    background: url('../image/goodBless.png');
    background-size: 100%;
    margin-top: 72rpx;
}
.blessList {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 40rpx;
    font-size: 22rpx;
}
.blessList .goodBless {
    width: 626rpx;
    height: auto;
    border-radius: 32rpx;
    border:#FA5241 3px solid; 
    margin-bottom: 32rpx; 
    background: #FFF4D2 url('../image/blessBg.png') no-repeat right;
    background-size: 50%;
    padding:14rpx;
    position: relative;
}
.blessList .goodBless .blessIcon {
    position: absolute;
    left: -60rpx;
    top: 30rpx;
    width: 136rpx;
    height: 136rpx;
    background: url('../image/bless1.png') no-repeat center;
    background-size: 100%;
}
.blessList .goodBless:nth-child(2) .blessIcon{
    background: url('../image/bless2.png') no-repeat center;
    background-size: 100%;
}
.blessList .goodBless:nth-child(3) .blessIcon{
    background: url('../image/bless3.png') no-repeat center;
    background-size: 100%;
}
.blessList .goodBless:nth-child(4) .blessIcon{
    background: url('../image/bless4.png') no-repeat center;
    background-size: 100%;
}
.blessList .goodBless .inside {
    border: 1px solid #F1DB99;
border-radius: 11px;
display: flex;
justify-content: space-between;
    align-items: center;
    padding: 30rpx 18rpx 30rpx 62rpx;
}
.leftRegion {
    display: flex;
    flex-direction: column;
}
.leftRegion span:first-child {
    font-size: 28rpx;
    font-weight: bold;
    color: #414141;
}
.rightRegion {
    width: 172rpx;
    height: 72rpx;
    font-size: 30rpx;
    color: #FF5442;
    line-height: 70rpx;
    text-align: center;
    border: 2px solid #FF5442;
    border-radius: 100px;
    box-sizing: border-box;
}
.rightRegion1 {
    background-color:#FF5442;
    color: #fff;
    line-height: 72rpx;
}
.rightRegion2 {
    background-color:#A5A5A5;
    color: #fff;
    border: none;
    line-height: 72rpx;
}

.activeState .stateTitle3 {
    height: 66rpx;
    width: 380rpx;
    background: url('../image/everyDay.png');
    background-size: 100%;
}
.goPlay {
    margin-top: 60rpx;
    font-size: 32rpx;
    color: #fff;
    align-self: flex-end;
    margin-right: 10rpx;
}
.goPlay .fillingList .filling {
    width: 608rpx;
    height: 88rpx;
    line-height: 88rpx;
    background-image: linear-gradient(-90deg, #F2402E 5%, #FA5241 100%);
border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx 0 70rpx;
    box-sizing: border-box;
    margin-bottom: 40rpx;
    position: relative;
}
.goPlay .fillingList .fillingGet {
    background: #A5A5A5;
}
.goPlay .fillingList .filling .listIcon {
    position: absolute;
    top: -20rpx;
    left: -64rpx;
    width: 128rpx;
    height: 128rpx;
    background: url('../image/filling.png') no-repeat center;
    background-size: 100%;
}
.goPlay .playList {
    margin-top: 60rpx;
}
.goPlay .playList .play {
    background-image: linear-gradient(-90deg, #3255FF 5%, #5572FF 97%);
}
.goPlay .playList .playGet {
    background: #A5A5A5;
}
.goPlay .playList .play .listIcon {
    background: url('../image/play.png') no-repeat center;
    background-size: 100%;
}
.state {
    font-size: 11px;
color: #E1915C;
text-align: center;
line-height: 120rpx;
}

@keyframes swing {
    0% {
      transform: rotate3d(0, 0, 1, 10deg);
    }
  
    50% {
      transform: rotate3d(0, 0, 1, -10deg);
    }
    100% {
      transform: rotate3d(0, 0, 1, 10deg);
    }
  }
  
  .swing {
    transform-origin: top center;
    animation: swing 2s infinite;
  }
.toast {
    position: absolute;
    width: 80px;
    height: 80px;
    top:50%;
    left:50%;
    margin-top: -40px;
    margin-left: -40px;
    line-height: 80px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, .6);
    /* display: none; */
}
.fontWeight {
    font-weight: bold;
}